<template>
  <div>
    <div v-if="medalData!=null&&medalData.routeDetail!=null&&medalData.routeDetail.length!=0" style="margin-bottom:20px">
      <el-divider>路线勋章</el-divider>
      <el-row type="flex" class="row-bg m-0" justify="space-around"  >
        <el-col :span="6" v-if="medalData.glodNum!=0" >
          <el-card class="block text-center m-0 " style="width: 100%;">
            <div>
              <el-badge class="item" type="warning" :value="medalData.glodNum">
                <el-button type="text" @click="gotoGoldMedal">金勋章</el-button></el-badge>
            </div>
            <el-image
              style="width: 60%;"
              src="http://wzsnginxservice001.vaiwan.com/wzs/medalBnak/金勋章.png">
            </el-image>
          </el-card>
        </el-col>
        <el-col :span="6" v-if="medalData.sliverNum!=0">
          <el-card class="block text-center m-0 " style="width: 100%;">
            <div>
              <el-badge class="item" type="primary" :value="medalData.sliverNum">
                <el-button type="text" @click="gotoSliverMedal">银勋章</el-button></el-badge>
            </div>
            <el-image
              style="width: 60%;"
              src="http://wzsnginxservice001.vaiwan.com/wzs/medalBnak/银勋章.png">
            </el-image>
          </el-card>
        </el-col>
        <el-col :span="6" v-if="medalData.copperNum!=0">
          <el-card class="block text-center m-0 " style="width: 100%;">
            <div>
              <el-badge class="item" type="info" :value="medalData.copperNum">
                <el-button type="text" @click="gotoCopperMedal">铜勋章</el-button></el-badge>
            </div>
            <el-image
              style="width: 60%;"
              src="http://wzsnginxservice001.vaiwan.com/wzs/medalBnak/铜勋章.png">
            </el-image>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <div v-if="medalData==null||medalData.routeDetail==null||medalData.routeDetail.length==0"
      style="height:300px;display:flex;align-items:center;justify-content:center">暂无获得任何勋章。</div>
  </div >
</template>
<script>
    export default {
      name: "Medal",
      props:["medalData"],
      data(){
          return{
            showflag:false,
            /*勋章总计*/
            medaldata:{
              "glodNum": 2,
              "sliverNum": 1,
              "copperNum": 0,
              "routeDetail": [{
                "gN": 2,
                "sN": 1,
                "cN": 0,
                "routeName": "天喜销售部人才培养计划"
              }]
            }
          }
      },
      methods:{
          /*点击课程名称，进入课程结果的详情页*/
        intoCourseDetail(courseId){
        },
        gotoGoldMedal(){
          var medaldata ={
            medallevel:1,
            medalnum:this.medalData.glodNum,
          };
          this.$router.push({
            // path: "../personalInfo/medalInfo",
            name:"medalInfo",
            query: {
                medallevel:1,
                medalnum:this.medalData.glodNum,
                // status:1,/*1-路径勋章详情，0-自由选取勋章详情*/
            },
          });
        },
        gotoSliverMedal(){
          var medaldata ={
            medallevel:2,
            medalnum:this.medalData.sliverNum,
          };
          this.$router.push({
            // path: "../personalInfo/medalInfo",
            name:"medalInfo",
            query: {
                medallevel:2,
                medalnum:this.medalData.sliverNum,
                // status:1,/*1-路径勋章详情，0-自由选取勋章详情*/
            },
          });
        },
        gotoCopperMedal(){
          var medaldata ={
            medallevel:3,
            medalnum:this.medalData.copperNum,
          };
          this.$router.push({
            // path: "../personalInfo/medalInfo",
            name:"medalInfo",
            query: {
                medallevel:3,
                medalnum:this.medalData.copperNum,
                // status:1,/*1-路径勋章详情，0-自由选取勋章详情*/
            },
          });
        },
      }
    }
</script>

<style >
  .el-button--text{
    color: #2d2f33;
  }
  /*.el-divider--horizontal{*/
  /*  margin: 30px 0;*/
  /*  border-top: 1px solid #2b2f3a;*/
  /*}*/
  /*.el-divider{*/
  /*  background-color:  #2b2f3a;*/
  /*}*/
  /*.el-divider__text{*/
  /*  font-size: large;*/
  /*  font-weight: normal;*/
  /*}*/
</style>
